
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">

  <title>vuetable - Bootstrap</title>

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">

  <style>
    /* Move down content because we have a fixed navbar that is 50px tall */
    body {
      padding-top: 50px;
      padding-bottom: 20px;
      overflow-y: scroll;
    }
    ul.dropdown-menu li {
      margin-left: 20px;
    }
    .vuetable th.sortable:hover {
      color: #2185d0;
      cursor: pointer;
    }
    .vuetable-actions {
      width: 11%;
      padding: 12px 0px;
      text-align: center;
    }
    .vuetable-actions > button {
      padding: 3px 6px;
      margin-right: 4px;
    }
    .vuetable-pagination {
      margin: 0;
    }
    .vuetable-pagination .btn {
      margin: 2px;
    }
    .vuetable-pagination-info {
      float: left;
      margin-top: auto;
      margin-bottom: auto;
    }
    ul.pagination {
      margin: 0px;
    }
    .vuetable-pagination-component {
      float: right;
    }
    .vuetable-pagination-component li a {
      cursor: pointer;
    }
    [v-cloak] {
      display: none;
    }
    .highlight {
      background-color: yellow;
    }
    .vuetable-detail-row {
      height: 200px;
    }
    .detail-row {
      margin-left: 40px;
    }
    .expand-transition {
      transition: all .5s ease;
    }
    .expand-enter, .expand-leave {
      height: 0;
      opacity: 0;
    }

    /* Loading Animation: */
    .vuetable-wrapper {
      opacity: 1;
      position: relative;
      filter: alpha(opacity=100); /* IE8 and earlier */
    }
    .vuetable-wrapper.loading {
      opacity:0.4;
      transition: opacity .3s ease-in-out;
      -moz-transition: opacity .3s ease-in-out;
      -webkit-transition: opacity .3s ease-in-out;
    }
    .vuetable-wrapper.loading:after {
      position: absolute;
      content: '';
      top: 40%;
      left: 50%;
      margin: -30px 0 0 -30px;
      border-radius: 100%;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      border: 4px solid #000;
      height: 60px;
      width: 60px;
      background: transparent !important;
      display: inline-block;
      -webkit-animation: pulse 1s 0s ease-in-out infinite;
      animation: pulse 1s 0s ease-in-out infinite;
    }
    @keyframes pulse {
      0% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6); }
      50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        border-width: 12px; }
      100% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6); }
    }
  </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success">Sign in</button>
      </form>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

<div id="app" class="container">
  <!-- Example row of columns -->
  <h2 class="sub-header">List of Users</h2>
  <hr>
  <div class="row">
    <div class="col-md-7 form-inline">
      <div class="form-inline form-group">
        <label>Search:</label>
        <input v-model="searchFor" class="form-control" @keyup.enter="setFilter">
        <button class="btn btn-primary" @click="setFilter">Go</button>
        <button class="btn btn-default" @click="resetFilter">Reset</button>
      </div>
      &nbsp;&nbsp;&nbsp;
      <div class="checkbox">
        <label>
          <input type="checkbox" v-model="multiSort"> Multisort (use Alt+Click)
        </label>
      </div>
    </div>
    <div class="col-md-5">
      <div class="dropdown form-inline pull-right">
        <label>Pagination:</label>
        <select class="ui simple dropdown" v-model="paginationComponent">
          <option value="vuetable-pagination">vuetable-pagination</option>
          <option value="vuetable-pagination-dropdown">vuetable-pagination-dropdown</option>
        </select>
        <label>Per Page:</label>
        <select class="form-control" v-model="perPage">
          <option value=10>10</option>
          <option value=15>15</option>
          <option value=20>20</option>
          <option value=25>25</option>
        </select>
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <i class="glyphicon glyphicon-cog"></i>
        </button>
        <ul class="dropdown-menu">
          <li v-for="field in fields">
                            <span class="checkbox">
                                <label>
                                  <input type="checkbox" v-model="field.visible">
                                  {{ field.title == '' ? field.name.replace('__', '') : field.title | capitalize }}
                                </label>
                            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="table-responsive">
    <vuetable v-ref:vuetable
              api-url="http://euvee.vicp.co/rest/task/"
              pagination-path=""
              :fields="fields"
              :sort-order="sortOrder"
              :multi-sort="multiSort"
              table-class="table table-bordered table-striped table-hover"
              ascending-icon="glyphicon glyphicon-chevron-up"
              descending-icon="glyphicon glyphicon-chevron-down"
              pagination-class=""
              pagination-info-class=""
              pagination-component-class=""
              :pagination-component="paginationComponent"
              :item-actions="itemActions"
              :append-params="moreParams"
              :per-page="perPage"
              wrapper-class="vuetable-wrapper"
              table-wrapper=".vuetable-wrapper"
              loading-class="loading"
              detail-row="makeDetailRow"
              detail-row-id="id"
              detail-row-transition="expand"
              row-class-callback="rowClassCB"
      ></vuetable>
  </div>
  <hr>

  <footer>
    <p>&copy; 2016 Company, Inc.</p>
  </footer>

</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script>
<script src="../../node_modules/vuetable/dist/vue-table.js"></script>
<script>
  var E_SERVER_ERROR = 'Error communicating with the server'

  // fields definition
  var tableColumns = [
    {
      name: 'id',
      title: '',
      dataClass: 'text-center',
      callback: 'showDetailRow'
    },
    {
      name: 'name',
      sortField: 'name',
    },
    {
      name: 'email',
      sortField: 'email',
    },
    {
      name: 'nickname',
      sortField: 'nickname',
      callback: 'allCap'
    },
    {
      name: 'birthdate',
      sortField: 'birthdate',
      callback: 'formatDate|D/MM/Y'
    },
    {
      name: 'gender',
      sortField: 'gender',
      titleClass: 'text-center',
      dataClass: 'text-center',
      callback: 'gender'
    },
    {
      name: '__actions',
      dataClass: 'text-center',
    }
  ]

  Vue.config.debug = true

  new Vue({
    el: '#app',
    data: {
      searchFor: '',
      fields: tableColumns,
      sortOrder: [{
        field: 'name',
        direction: 'asc'
      }],
      multiSort: true,
      perPage: 10,
      paginationComponent: 'vuetable-pagination',
      paginationInfoTemplate: 'แสดง {from} ถึง {to} จากทั้งหมด {total} รายการ',
      itemActions: [
        { name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} },
        { name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} },
        { name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
      ],
      moreParams: [],
    },
    watch: {
      'perPage': function(val, oldVal) {
        this.$broadcast('vuetable:refresh')
      },
      'paginationComponent': function(val, oldVal) {
        this.$broadcast('vuetable:load-success', this.$refs.vuetable.tablePagination)
        this.paginationConfig(this.paginationComponent)
      }
    },
    methods: {
      /**
       * Callback functions
       */
      allCap: function(value) {
        return value.toUpperCase()
      },
      gender: function(value) {
        return value == 'M'
          ? '<span class="label label-info"><i class="glyphicon glyphicon-star"></i> Male</span>'
          : '<span class="label label-success"><i class="glyphicon glyphicon-heart"></i> Female</span>'
      },
      formatDate: function(value, fmt) {
        if (value == null) return ''
        fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt
        return moment(value, 'YYYY-MM-DD').format(fmt)
      },
      showDetailRow: function(value) {
        var icon = this.$refs.vuetable.isVisibleDetailRow(value) ? 'glyphicon glyphicon-minus-sign' : 'glyphicon glyphicon-plus-sign'
        return [
          '<a class="show-detail-row">',
          '<i class="' + icon + '"></i>',
          '</a>'
        ].join('')
      },
      /**
       * Other functions
       */
      setFilter: function() {
        this.moreParams = [
          'filter=' + this.searchFor
        ]
        this.$nextTick(function() {
          this.$broadcast('vuetable:refresh')
        })
      },
      resetFilter: function() {
        this.searchFor = ''
        this.setFilter()
      },
      preg_quote: function( str ) {
        // http://kevin.vanzonneveld.net
        // +   original by: booeyOH
        // +   improved by: Ates Goral (http://magnetiq.com)
        // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
        // +   bugfixed by: Onno Marsman
        // *     example 1: preg_quote("$40");
        // *     returns 1: '\$40'
        // *     example 2: preg_quote("*RRRING* Hello?");
        // *     returns 2: '\*RRRING\* Hello\?'
        // *     example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
        // *     returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'

        return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
      },
      highlight: function(needle, haystack) {
        return haystack.replace(
          new RegExp('(' + this.preg_quote(needle) + ')', 'ig'),
          '<span class="highlight">$1</span>'
        )
      },
      makeDetailRow: function(data) {
        return [
          '<td colspan="7">',
          '<div class="detail-row">',
          '<div class="form-group">',
          '<label>Name: </label>',
          '<span>' + data.name + '</span>',
          '</div>',
          '<div class="form-group">',
          '<label>Email: </label>',
          '<span>' + data.email + '</span>',
          '</div>',
          '<div class="form-group">',
          '<label>Nickname: </label>',
          '<span>' + data.nickname + '</span>',
          '</div>',
          '<div class="form-group">',
          '<label>Birthdate: </label>',
          '<span>' + data.birthdate + '</span>',
          '</div>',
          '<div class="form-group">',
          '<label>Gender: </label>',
          '<span>' + data.gender + '</span>',
          '</div>',
          '</div>',
          '</td>'
        ].join('')
      },
      rowClassCB: function(data, index) {
        return (index % 2) === 0 ? 'positive' : ''
      },
      paginationConfig: function(componentName) {
        console.log('paginationConfig: ', componentName)
        if (componentName == 'vuetable-pagination') {
          this.$broadcast('vuetable-pagination:set-options', {
            wrapperClass: 'pagination',
            icons: { first: '', prev: '', next: '', last: ''},
            activeClass: 'active',
            linkClass: 'btn btn-default',
            pageClass: 'btn btn-default'
          })
        }
        if (componentName == 'vuetable-pagination-dropdown') {
          this.$broadcast('vuetable-pagination:set-options', {
            wrapperClass: 'form-inline',
            icons: { prev: 'glyphicon glyphicon-chevron-left', next: 'glyphicon glyphicon-chevron-right' },
            dropdownClass: 'form-control'
          })
        }
      }
    },
    events: {
      'vuetable:row-changed': function(data) {
        console.log('row-changed:', data.name)
      },
      'vuetable:row-clicked': function(data, event) {
        console.log('clicked:', data.name)
        this.$broadcast('vuetable:toggle-detail', data.id)
      },
      'vuetable:action': function(action, data) {
        console.log('vuetable:action', action, data)
        if (action == 'view-item') {
          sweetAlert(action, data.name)
        } else if (action == 'edit-item') {
          sweetAlert(action, data.name)
        } else if (action == 'delete-item') {
          sweetAlert(action, data.name)
        }
      },
      'vuetable:load-success': function(response) {
        var data = response.data.data
        console.log(data)
        if (this.searchFor !== '') {
          for (n in data) {
            data[n].name = this.highlight(this.searchFor, data[n].name)
            data[n].email = this.highlight(this.searchFor, data[n].email)
          }
        }
      },
      'vuetable:load-error': function(response) {
        if (response.status == 400) {
          sweetAlert('Something\'s Wrong!', response.data.message, 'error')
        } else {
          sweetAlert('Oops', E_SERVER_ERROR, 'error')
        }
      }
    }
  })
</script>
</body>
</html>
